<template>
  <a-layout style="height:100%">
    <a-layout-sider>
      <Menu :data="menu"></Menu>
    </a-layout-sider>
    <a-layout>
      <Header class="header"></Header>
      <Tabs :menu="menu" @change="handleTabsChange"></Tabs>
      <a-layout-content class="content">
        <router-view v-slot="data">
          <keep-alive :include="includeNames">
            <component :is="data.Component"></component>
          </keep-alive>
        </router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script lang="ts">
  import { defineComponent, reactive } from 'vue'
  import Menu from './menu.vue'
  import Header from './header.vue'
  import Tabs from './tabs/main.vue'

  export default defineComponent({
    components: {
      Menu,
      Header,
      Tabs
    },
    setup() {
      const menu = reactive([
        { label: '介绍', path: '/introduce' },
        { 
          label: '示例',
          children: [
            { label: 'SVG 图标', path: '/svg-icon' }
          ]
        },
        { 
          label: '页面缓存',
          children: [
            { label: 'A 页面', path: '/page-a' },
            { label: 'B 页面', path: '/page-b' }
          ]
        }
      ])
      const includeNames: string[] = reactive([])
      return {
        menu,
        includeNames
      }
    },
    methods: {
      handleTabsChange(data: Array<string>) {
        this.includeNames = data
      }
    }
  })
</script>

<style lang="scss" scoped>
  .header {
    box-shadow: 0 2px 8px #f0f1f2;
    z-index: 1;
  }
  .content {
    padding: 20px;
  }
</style>